<template>
	<el-card>
		<el-form :inline="true" :model="state.queryForm" @keyup.enter="getDataList()">
			<el-form-item>
				<el-button @click="getDataList()">刷新</el-button>
			</el-form-item>
		</el-form>
		<el-table v-loading="state.dataListLoading" :data="state.dataList" border style="width: 100%" @selection-change="selectionChangeHandle">
			<el-table-column type="selection" header-align="center" align="center" width="50"></el-table-column>
			<el-table-column prop="author" label="作者" header-align="center" align="center"></el-table-column>
			<el-table-column prop="packageName" show-overflow-tooltip label="项目包名" header-align="center" align="center"></el-table-column>
      <el-table-column prop="moduleName" show-overflow-tooltip label="模块名称" header-align="center" align="center"></el-table-column>
      <el-table-column prop="baseclassId" show-overflow-tooltip label="基类" header-align="center" align="center">
        <template #default="scope">
          {{baseClassFilter(scope.row)}}
        </template>
      </el-table-column>
			<el-table-column  label="模版版本" show-overflow-tooltip header-align="center" align="center">
        <template #default="scope">
          {{templateVersionFilter(scope.row)}}
        </template>
      </el-table-column>
			<el-table-column label="操作" fixed="right" header-align="center" align="center" width="170">
				<template #default="scope">
					<el-button type="primary" link @click="addOrUpdateHandle(scope.row.id)">编辑</el-button>
				</template>
			</el-table-column>
		</el-table>
		<el-pagination
			:current-page="state.page"
			:page-sizes="state.pageSizes"
			:page-size="state.limit"
			:total="state.total"
			layout="total, sizes, prev, pager, next, jumper"
			@size-change="sizeChangeHandle"
			@current-change="currentChangeHandle"
		>
		</el-pagination>

		<!-- 弹窗, 新增 / 修改 -->
		<add-or-update ref="addOrUpdateRef" @refreshDataList="getDataList"></add-or-update>
	</el-card>
</template>

<script setup lang="ts">
import { reactive, ref,onMounted } from 'vue'
import { IHooksOptions } from '@/hooks/interface'
import { useCrud } from '@/hooks'
//import { ElMessage } from 'element-plus'
import AddOrUpdate from './add-or-update.vue'
import { templateVersionListApi } from '@/api/templateVersion'
import {useBaseClassListApi} from "@/api/baseClass";

const state: IHooksOptions = reactive({
	dataListUrl: '/gen/projectconfig/page',
	deleteUrl: '/gen/projectconfig',
	queryForm: {
		connName: '',
		dbType: ''
	}
})
const templateVersionList= ref<any[]>([])
const baseClassList= ref<any[]>([])

// const datasourceHandle = (id: number) => {
// 	useDataSourceTestApi(id).then((res: any) => {
// 		ElMessage.success(res.data)
// 	})
// }

const addOrUpdateRef = ref()
const addOrUpdateHandle = (id?: number) => {
	addOrUpdateRef.value.init(id)
}

//模板版本
const  getTemplateVersionList = async () =>{
  const res =await templateVersionListApi()
  templateVersionList.value = res.data
}

const getBaseClassList = () => {
  useBaseClassListApi().then(res => {
    baseClassList.value = res.data
  })
}

onMounted(()=>{
  getTemplateVersionList()
  getBaseClassList()
})

const { getDataList, selectionChangeHandle, sizeChangeHandle, currentChangeHandle, deleteBatchHandle } = useCrud(state)


const templateVersionFilter = (row) =>{
  const code =templateVersionList.value.filter(code => code.id == row.templateVersion)
  if(code.length>0){
    return code[0].versionName
  }
}

const baseClassFilter = (row) =>{
  const code =baseClassList.value.filter(code => code.id == row.baseclassId)
  if(code.length>0){
    return code[0].code
  }
}

</script>
